<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <title>协同平台商脉圈运营者管理系统-写邮件</title>

    <!--CSS-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">

    <!-- HTML5 shim and Respond.js for IE8 support HTML5 elements and media queries-->
    <!--[if lt IE 9]>
    <script src="js/libs/html5shiv.min.js"></script>
    <script src="js/libs/respond.min.js"></script>
    <![endif]-->
</head>

<body class="overflow-x-h">
<div class="container animated fadeInRight">

    <!--breadcrumb-->
    <ol class="breadcrumb">
        <li>圈邮件</li>
        <li>写邮件</li>
    </ol>

    <form role="form" class="email-add edit-box" data-validator-option="{timely:1, theme:'yellow_top'}">
        <div class="col-lg-9">
            <div class="form-group clearfix">
                <label class="key control-label pull-left">发件人：</label>
                <p class="pull-left">
                    <img class="avatar" src="images/base/user.jpg"/>
                    <span class="author">Stefan</span>
                </p>
            </div>
            <div class="form-group clearfix">
                <label class="key control-label pull-left">收件人：</label>
                <div class="recipients pull-left">
                    <img class="avatar" src="images/base/user.jpg"/>
                    <span class="author">Stefan2</span>
                    <a href="javascript:;" class="toggle-icon">
                        <i class="fa fa-plus"></i>
                        <i class="fa fa-minus hide"></i>
                        <i class="fa fa-user"></i>
                    </a>
                </div>
            </div>
            <div class="form-group ckeditor-box clearfix">
                <textarea name="full-detail" id="full-detail" class="form-control ckeditor"></textarea>
            </div>
            <div class="btn-wrap">
                <button type="button" class="btn btn-cancel">取消</button>
                <button type="submit" class="btn btn-confirm">确认</button>
            </div>
        </div>
        <div class="col-lg-3 member-list-wrap">
            <input class="form-control" placeholder="查找商脉圈成员" />
            <ul class="nav mem-list">
                <li class="item">
                    <img class="avatar" src="images/base/user.jpg" />
                    <span class="name">忍者神龟</span>
                </li>
                <li class="item">
                    <img class="avatar" src="images/base/user.jpg" />
                    <span class="name">忍者神龟</span>
                </li>
                <li class="item">
                    <img class="avatar" src="images/base/user.jpg" />
                    <span class="name">忍者神龟</span>
                </li>
                <li class="item">
                    <img class="avatar" src="images/base/user.jpg" />
                    <span class="name">忍者神龟</span>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </form>
</div>

<script src="js/libs/jquery-1.12.1.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/slimscroll.min.js"></script>
<script src="js/validator/jquery.validator.min.js?local=zh-CN"></script>
<script src="js/ckeditor/ckeditor.js"></script>
<script src="js/base.js"></script>
<script>
    $(function(){
        // 圈成员列表切换
        $('.email-add').on('click','.toggle-icon',function(){
            if(!$(this).children(":first").hasClass('hide')){
                $(this).children(":first").addClass('hide');
                $(this).children(":nth-child(2)").removeClass('hide');
                $('.member-list-wrap').addClass('active');
                return;
            }
            if($(this).children(":first").hasClass('hide')){
                $(this).children(":first").removeClass('hide');
                $(this).children(":nth-child(2)").addClass('hide');
                $('.member-list-wrap').removeClass('active');
                return;
            }
        })
    })
</script>
</body>
</html>